<template>
  <!-- <div class="m-tabbar"> -->
    <mt-tabbar v-model="selected" fixed @click.native="toTabbar">
      <mt-tab-item v-for="item in tabs" :id="item.id" :key="item.id" v-show="item.roles">
        <div class="imgIcon">
          <img slot="icon" :src="selected==item.id ? item.tab_img_active : item.tab_img">
          <!-- <mt-badge size="small" class="num">2</mt-badge> -->
          <mt-badge v-if="item.num != 0" size="small" class="num">{{item.num}}</mt-badge>
        </div>
        {{item.name}}
        <!-- <mt-badge v-if="item.num != 0" size="small" class="num">{{item.num}}</mt-badge> -->
      </mt-tab-item>
    </mt-tabbar>
  <!-- </div> -->
</template>
<script type="text/ecmascript-6">
  import ApiService from '@/services/API-servies'
  import { Tabbar, TabItem ,Cell,TabContainer, TabContainerItem,Badge} from 'mint-ui';
  import {mapGetters} from 'vuex';
  export default {
    props: ['childMsg'],
    created() {
    },
    data() {
      return {
        selected: '',
        num:'1',
        tabs:[{
          id:'bidding',
          name:'竞价',
          tab_img:require('common/imgs/bidding.png'),
          tab_img_active:require('common/imgs/bidding_active.png'),
          roles:true,
          num:'0'
        },{
          id:'transport',
          name:'运单',
          tab_img:require('common/imgs/waybill.png'),
          tab_img_active:require('common/imgs/waybill_active.png'),
          roles:true,
          num:'0'
        },{
          id:'settlement',
          name:'结算',
          tab_img:require('common/imgs/settlement.png'),
          tab_img_active:require('common/imgs/settlement_active.png'),
          roles:true,
          num:'0'
        },{
          id:'mine',
          name:'我的',
          tab_img:require('common/imgs/mine.png'),
          tab_img_active:require('common/imgs/mine_active.png'),
          roles:true,
          num:'0'
        }]
      }
    },
    computed:{
      ...mapGetters(['userType'])
    },
    mounted(){
      this.child();
      this.switchedroles();
    },
    watch:{
      userType(val,old){
        if(val == 40){
          for(let i in this.tabs){
            if(this.tabs[i].id == 'bidding' || this.tabs[i].id == 'settlement'){
              this.tabs[i].roles = false;
            }
          }
          this.getDriverCount();
        }else if(val == 30){
          for(let i in this.tabs){
            this.tabs[i].roles = true;
          }
          this.getCountNum();
        }
      }
    },
    methods: {
      child(){
        this.selected = this.childMsg
      },
      switchedroles(){
        if(this.userType == 40){
          for(let i in this.tabs){
            if(this.tabs[i].id == 'bidding' || this.tabs[i].id == 'settlement'){
              this.tabs[i].roles = false;
            }
          }
          this.getDriverCount();
        }else if(this.userType == 30){
          for(let i in this.tabs){
            this.tabs[i].roles = true;
          }
          this.getCountNum();
        }
      },
      toTabbar(){
        switch(this.selected){
          case 'bidding' :
          this.$router.push({path:'/bidding'});
          break;
          case 'transport' :
          this.$router.push({path:'/transport'});
          break;
          case 'settlement' :
          this.$router.push('settlement');
          break;
          case 'mine' :
          this.$router.push('mine');
          break;
        }
    },
      userType(val,old){
        if(val == 40){
          for(let i in this.tabs){
            if(this.tabs[i].id == 'bidding' || this.tabs[i].id == 'settlement'){
              this.tabs[i].roles = false;
            }
          }
        }else if(val == 30){
          for(let i in this.tabs){
            this.tabs[i].roles = true;
          }
        }
      },getCountNum(){
         ApiService.transport.getCountNum().then(res => {
            if (res.meta.retCode === "0") {
              var _mapData = res.data;
              this.tabs[0].num = _mapData.bidding;
              this.tabs[1].num = _mapData.transport;
              this.tabs[2].num = _mapData.settlement;
            }
          }); 
       },getDriverCount(){
          let params = {
            pageSize:10,
            pageNo: 1,
            source:'app',
          }
          ApiService.driver.load(params).then((res) => {
                this.tabs[1].num  = res.data.count;
          });
       }
        
    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer:TabContainer,
      MtTabContainerItem:TabContainerItem,
      MtBadge:Badge
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  // .m-tabbar{
    .mint-tabbar > .mint-tab-item.is-selected{
      background: transparent;
    }
    .mint-tab-item{
      position: relative;
      .mint-tab-item-icon{
        margin-top: 10px;
      }
      img{
        width: 40px;
        height: 40px;
        text-align: center;
        margin: 0 auto 2px;
      }
      .is-selected{
        background-color:transparent;
        .mint-tab-item-label{
          color: #5395FF
        }
      }
      .mint-tab-item-icon{
        width: 40px;
        height: 40px;
      }
      .mint-tab-item-label{
        color: #666;
        font-size: 20px;
        margin-top: 12px
      }
      .imgIcon{
          width: 40px;
          margin: 0 auto;
          position: relative;
        .num{
          padding: 4px 10px;
          font-size: 24px;
          background: #f44336;
          color: #fff;
          position: absolute;
          top: -16px;
          left: 36px;
        }
      }
    }
  // }
</style>
